<script setup lang="ts">
import { computed, ref } from 'vue';
import { useAppStore } from '@/store/modules/app';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));

const dataList = ref([
  {
    title: '待处理订单 ',
    value: 8,
    unit: '个',
    color: 'var(--el-color-primary)',
    icon: 'Document'
  },
  {
    title: '今日积分',
    value: 120,
    unit: '分',
    color: 'var(--el-color-success)',
    icon: 'Star'
  },
  {
    title: '系统消息',
    value: 3,
    unit: '条',
    color: 'var(--el-color-warning)',
    icon: 'Bell'
  },
  {
    title: '账户余额',
    value: 5280,
    unit: '元',
    color: 'var(--el-color-danger)',
    icon: 'Wallet'
  }
]);
</script>

<template>
  <el-row :gutter="gap">
    <el-col :xl="6" :lg="12" :md="12" :sm="24" v-for="(item, index) in dataList" :key="index" class="mb-16px">
      <el-card class="h-100px">
        <div class="flex-y-center justify-between">
          <div class="flex-y-center">
            <el-icon class="text-24px mr-12px" :style="{ color: item.color }">
              <component :is="item.icon" />
            </el-icon>
            <span class="text-16px">{{ item.title }}</span>
          </div>
          <div class="flex items-end">
            <span class="text-28px font-bold mr-4px">{{ item.value }}</span>
            <span class="text-14px text-gray-500 dark:text-gray-400">{{ item.unit }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped></style> 